<template>
    <div class="cgs-list flex-row" @mouseleave.stop = "extendShow = false">
        <div class="list-view-container">
            <div class="list-view"
                 :class="{shadow: (isEnter && showMask)}"
                 @mouseenter.stop = "isEnter = true"
                 @mouseleave.stop = "isEnter = false"
            >
                <img v-if="appData.backgroundUrl"
                     :src="appData.backgroundUrl"
                     class="list-img"
                     alt="" />
                <div v-show="appData.status === 1" class="list-status no-select">已发布</div>
                <div v-show="appData.status !== 1" class="list-status no-select">未发布</div>
            </div>

            <div class="list-button no-select"
                 v-show="(isEnter && showMask)"
                 @mouseenter.stop = "isEnter = true"
                 @click.stop="$emit('editor', $event)"
            >
                编辑
            </div>
        </div>
        <div class="list-content">
            <div class="list-content-header">
                <slot name="title"></slot>
            </div>
            <div class="list-content-footer flex-row">

                <div class="list-extend-item no-select"
                     v-show="appData.appAuths.MANAGE_APP_AUTH"
                     @click.stop="$emit('authority', $event)"
                >
                    <span class="iconfont cgsIcon-quanxian card-icon"/>
                    权限
                </div>
                <div class="list-extend-item no-select"
                     v-show="appData.appAuths.DELETE_PORTAL_VISUAL"
                     @click.stop="$emit('delete-app', $event)"
                >
                    <span class="iconfont cgsIcon-shanchu card-icon"/>
                    删除
                </div>
                <div class="list-extend-item no-select"
                     v-show="appData.appAuths.EDIT_PORTAL_VISUAL"
                     @click.stop="$emit('modify', $event)"
                >
                    <span class="iconfont cgsIcon-xiugai card-icon"/>
                    修改
                </div>
                <div class="list-extend-item no-select"
                     v-show="appData.appAuths.PREVIEW_PORTAL_VISUAL"
                     @click.stop="$emit('preview', $event)"
                >
                    <span class="iconfont cgsIcon-yulan card-icon"/>
                    预览
                </div>
                <div class="list-extend-item no-select"
                     v-show="appData.appAuths.EXPORT"
                     @click.stop="$emit('export-app', $event)"
                >
                    <span class="iconfont cgsIcon-daochu card-icon"/>
                    导出
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "CgsList",
        props: {
            appData: Object,
            showMask: Boolean
        },
        data() {
            return {
                extendShow: false,
                isEnter: false
            }
        }
    }
</script>

<style scoped>
    .cgs-list {
        width: 100%;
        height: 200px;
        border-radius: 3px;
        position: relative;
    }
    .list-view-container {
        width: 300px;
        height: 180px;
        margin: 10px;
        position: relative;
        flex: 0 0 300px;
    }
    .list-view {
        width: 100%;
        height: 100%;
        position: relative;
        justify-content: space-between;
    }
    .list-img {
        width: 100%;
        height: 100%;
    }
    .list-content {
        flex: 1 1 auto;
    }
    .list-content-header {
        width: 100%;
        height: 150px;
        padding: 20px;
    }
    .list-content-footer {
        width: 500px;
        margin-top: 10px;
        height: 30px;
    }
    .shadow {
        filter: blur(3px);
    }
    .list-button {
        width: 88px;
        height: 36px;
        background: #4C84FF;
        color: #fff;
        border-radius: 2px;
        line-height: 36px;
        text-align: center;
        cursor: pointer;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -18px;
        margin-left: -44px;
    }
    .list-button:hover {
        background: #79A3FF;
    }
    .list-status {
        width: 60px;
        height: 22px;
        border-radius: 3px 0px 0px 3px;
        font-size: 12px;
        line-height: 22px;
        text-align: center;
        position: absolute;
        top: 10px;
        left: 10px;
    }
    .list-extend-item {
        padding: 6px 10px;
        width: 80px;
        height: 30px;
        cursor: pointer;
        font-size: 14px;
        line-height: 18px;
        text-shadow: 0px 2px 8px rgba(70, 75, 82, 0.2);
    }
    .list-extend-item-icon {
        background-position: center;
        margin-top: -2px;
        width: 25px;
        height: 25px;
        background-size: 60% 60%;
    }
</style>
